<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"" rel="stylesheet">
		<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/3.2.3/animate.css" rel="stylesheet">
		<link rel="stylesheet" href="../../static/layui/css/layui.css" media="all">
		<link rel="stylesheet" type="text/css" href="../../static/css/public.css" />
		<style type="text/css">
			#menu {
				width: 0;
				/*设置为0 隐藏自定义菜单*/
				/* height: 125px; */
				overflow: hidden;
				/*隐藏溢出的元素*/
				box-shadow: 0 1px 1px #888, 1px 0 1px #ccc;
				position: absolute;
				background: #fff;
				/*自定义菜单相对与body元素进行定位*/
			}
			.menu {
				width: 130px;
				height: 25px;
				line-height: 25px;
				padding: 0 10px;
			}
		</style>
	</head>

	<body>
		<div id="app" class="main">
			<div class="shadow">
				<div>
					<h4>鼠标右键</h4>
					<pre>
		#menu {
			width: 0;
			overflow: hidden;
			box-shadow: 0 1px 1px #888, 1px 0 1px #ccc;
			position: absolute;
			background: #fff;
		}
		.menu {
			width: 130px;
			height: 25px;
			line-height: 25px;
			padding: 0 10px;
		}				
						
		&lt;div id="menu"&gt;
			&lt;div class="menu"&gt;功能1&lt;/div&gt;
			&lt;div class="menu"&gt;功能2&lt;/div&gt;
			&lt;div class="menu"&gt;功能3&lt;/div&gt;
			&lt;div class="menu"&gt;功能4&lt;/div&gt;
			&lt;div class="menu"&gt;功能5&lt;/div&gt;
		&lt;/div&gt;
		
		window.oncontextmenu = function(e) {
			//取消默认的浏览器自带右键 很重要！！
			e.preventDefault();
			//获取我们自定义的右键菜单
			var menu = document.querySelector("#menu");
			//根据事件对象中鼠标点击的位置，进行定位
			menu.style.left = e.clientX + 'px';
			menu.style.top = e.clientY + 'px';
			//改变自定义菜单的宽，让它显示出来
			menu.style.display='block'
			menu.style.width = '125px';
		}
		//关闭右键菜单，很简单
		window.onclick = function(e) {
			//用户触发click事件就可以关闭了，因为绑定在window上，按事件冒泡处理，不会影响菜单的功能
			document.querySelector('#menu').style.display = 'none';
		}
		<div id="menu">
			<div class="menu">功能1</div>
			<div class="menu">功能2</div>
			<div class="menu">功能3</div>
			<div class="menu">功能4</div>
			<div class="menu">功能5</div>
		</div>
					</pre>
				</div>
				<div>
					<h4>禁用鼠标右键</h4>
					<pre>
	&lt;body oncontextmenu="<span class="red">return false</span>"&gt;
	  &lt;div&gt;&lt;/div&gt;
	&lt;/body&gt;					
					</pre>
				</div>
			</div>
		</div>
		<!--页面加载进度条-->
		<script src="https://cdn.bootcdn.net/ajax/libs/pace/0.5.0/pace.min.js"></script>
		<script type="text/javascript">
			window.oncontextmenu = function(e) {
				//取消默认的浏览器自带右键 很重要！！
				e.preventDefault();
				//获取我们自定义的右键菜单
				var menu = document.querySelector("#menu");
				//根据事件对象中鼠标点击的位置，进行定位
				menu.style.left = e.clientX + 'px';
				menu.style.top = e.clientY + 'px';
				//改变自定义菜单的宽，让它显示出来
				menu.style.display='block'
				menu.style.width = '125px';
			}
			//关闭右键菜单，很简单
			window.onclick = function(e) {
				//用户触发click事件就可以关闭了，因为绑定在window上，按事件冒泡处理，不会影响菜单的功能
				document.querySelector('#menu').style.display = 'none';
			}
		</script>
	</body>

</html>